<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./demo.css">
    <title>Document</title>
</head>
<body>
    <div class="box box1">
        <img src="./imgs/img1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <br>
    <hr>
    <br>

    <div class="box box2">
        <img src="./imgs/img1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <br>
    <hr>
    <br>

    <div class="box box3">
        <img src="./imgs/img1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script src="./demo.js"></script>

    <script>
        let swiper1 = new Swiper('.box1')
        let swiper2 = new Swiper('.box2')
        let swiper3 = new Swiper('.box3')



        // let swiper1 = new Swiper('.box1',{
        //         bgYq:'yellow',
        //         time: 2000})
        // let swiper2 = new Swiper('.box2',{
        //         bgYq:'red',
        //         time: 5000
        //     })
        // let swiper3 = new Swiper('.box3',{
        //         bgYq:'green',
        //         time: 3000
        //     })   
    </script>
</body>
</html>